<template>
	<div class="sales-page">
		<!-- 日期选择区域 -->
		<div class="date-header">
			<div class="date-tabs">
				<div v-for="(item, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === index }]"
					@click="onTabChange(index)">
					{{ item }}
				</div>
			</div>
			<div class="date-picker" @click="showCalendar">
				<uni-icons type="calendar" size="14" color="#333"></uni-icons>
				<span>{{ currentDate }}</span>
			</div>
		</div>

		<!-- 数据统计区域 -->
		<div class="stats-section">
			<div class="stats-row">
				<div class="stats-item">
					<span class="value">{{ salesAmount }}</span>
					<span class="label">营业额(元)</span>
				</div>
				<div class="stats-item">
					<span class="value">{{ orderCount }}</span>
					<span class="label">订单数量(笔)</span>
				</div>
			</div>
		</div>

		<!-- 数据类型切换 -->
		<div class="data-type-tabs">
			<div class="tabs-wrapper">
				<div v-for="(item, index) in dataTypes" :key="index"
					:class="['type-item', { active: currentDataType === index }]" @click="onDataTypeChange(index)">
					{{ item }}
				</div>
			</div>
		</div>

		<!-- 图表区域 -->
		<div class="charts-box">
			<qiun-data-charts type="line" :chartData="data" v-show="!isShowCalendar"/>
		</div>


		<!-- 数据列表 -->
		<div class="data-list">
			<div class="list-header">
				<span>场地名称</span>
				<span>订单数</span>
				<span>营业额</span>
				<span>平台券</span>
			</div>
			<div class="list-content">
				<div class="list-item" v-for="(item, index) in locationList" :key="index">
					<span class="name">{{ item.name }}</span>
					<span class="orders">{{ item.orders }}</span>
					<span class="amount">{{ item.amount }}</span>
					<span class="coupon">{{ item.coupon }}</span>
				</div>
			</div>
		</div>
		<uni-calendar
			ref="calendar"
			:insert="false"
			@confirm="confirmDate"
			@close="closeDate"
			 />
	</div>
</template>

<script>
	import qiunDataCharts from "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	import {
		getDay,
		getWeek,
		getMonth,
		getStation
	} from '@/api/order.js'
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
				// 日期选项卡数据
				tabs: ['日', '周', '月'],
				currentTab: 0,
				currentDate: '2025-01-17',
				// 统计数据
				salesAmount: '0.00',
				orderCount: 0,
				platformCoupon: '0.00',

				dayData: {},
				weekData: {},
				monthData: {},

				// 数据类型选项
				dataTypes: ['营业额', '订单'],
				currentDataType: 0,

				// 图表数据
				data: {
					"categories": ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", '22'],
					"series": [{
						"name": "营业额（元）",
						"data": []
					}]
				},

				// 搜索关键词
				searchKeyword: '',

				// 场地列表数据
				locationList: [],
				stationData: {},
				isShowCalendar:false,
			}
		},
		methods: {
			// 切换日期选项卡
			onTabChange(index) {
				this.currentTab = index;
				this.updateChartData(this.currentTab, this.currentDataType); // 更新图表数据
			},

			// 切换数据类型
			onDataTypeChange(index) {
				this.currentDataType = index;
				this.updateChartData(this.currentTab, this.currentDataType);
			},

			// 更新图表数据
			updateChartData(tabIndex, typeIndex) {
				const totalFees = []
				const totalOrders = []
				switch (tabIndex) {
					case 0: // 日
						this.dayData.time_segments.forEach(segment => {
							totalFees.push(segment.total_fee);
							totalOrders.push(segment.total_orders);
						});
						if (typeIndex == 0) {
							this.data = {
								"categories": ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", '22'],
								"series": [{
									"name": "营业额（元）",
									"data": totalFees
								}]
							};
						} else {
							this.data = {
								"categories": ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", '22'],
								"series": [{
									"name": "订单数(条)",
									"data": totalOrders
								}]
							};
						}
						this.salesAmount = this.dayData.total_fee
						this.orderCount = this.dayData.total_orders
						this.locationList = this.stationData.map(item => ({
							name: item.title,
							orders: item.day_orders,
							amount: item.day_fee,
							coupon: 0
						}))
						break;
					case 1: // 周
						this.weekData.week_data.forEach(segment => {
							totalFees.push(segment.total_fee.toFixed(2));
							totalOrders.push(segment.total_orders);
						});
						if (typeIndex == 0) {
							this.data = {
								"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
								"series": [{
									"name": "营业额（元）",
									"data": totalFees
								}]
							};
						} else {
							this.data = {
								"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
								"series": [{
									"name": "订单数（条）",
									"data": totalOrders
								}]
							};
						}
						this.salesAmount = this.weekData.total_fee
						this.orderCount = this.weekData.total_orders
						this.locationList = this.stationData.map(item => ({
							name: item.title,
							orders: item.week_orders,
							amount: item.week_fee,
							coupon: 0
						}))
						break;
					case 2: // 月
						this.monthData.monthly_data.forEach(segment => {
							totalFees.push(segment.total_fee.toFixed(2));
							totalOrders.push(segment.total_orders);
						});
						if (typeIndex == 0) {
							this.data = {
								"categories": ["01", "03", "06", "09", "12", "15", "18", "21", "24", "27", "30"],
								"series": [{
									"name": "营业额（元）",
									"data": totalFees
								}]
							};
						} else {
							this.data = {
								"categories": ["01", "03", "06", "09", "12", "15", "18", "21", "24", "27", "30"],
								"series": [{
									"name": "订单（条）",
									"data": totalOrders
								}]
							};
						}
						this.salesAmount = this.monthData.total_fee
						this.orderCount = this.monthData.total_orders
						this.locationList = this.stationData.map(item => ({
							name: item.title,
							orders: item.month_orders,
							amount: item.month_fee,
							coupon: 0
						}))
						break;
					default:
						break;
				}
			},
			// 获取日期
			getDate() {
				const now = new Date()
				// 获取今日信息
				const today = now.toISOString().split('T')[0]
				this.currentDate = today
				// 获取

				const month = now.toISOString().split('T')[0]
			},
			// 获取数据
			async getAnalysis() {
				let dayRes = await getDay(this.currentDate)
				let weekRes = await getWeek(this.currentDate)
				let monthRes = await getMonth(this.currentDate)
				let res = await getStation("")
				this.dayData = dayRes.data
				this.weekData = weekRes.data
				this.monthData = monthRes.data
				this.stationData = res.data
				console.log(this.stationData);
				this.updateChartData(this.currentTab, this.currentDataType); // 初始加载数据
			},
			showCalendar(){
				this.$refs.calendar.open()
				this.isShowCalendar = true
			},
			confirmDate(e){
				console.log(e)
				this.currentDate = e.year+"-"+e.month+"-"+e.date
				this.getAnalysis()
				this.isShowCalendar = false
			},
			closeDate(){
				this.isShowCalendar = false
			}
		},
		onLoad() {
			this.getDate()
			this.getAnalysis();
		}
	}
</script>
<style scoped lang="scss">
	.sales-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 20px;
	}

	.date-header {
		background-color: #ffd700;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.date-tabs {
			display: flex;
			background: #fff;
			border-radius: 20px;
			padding: 3px;

			.tab-item {
				padding: 5px 20px;
				border-radius: 20px;
				font-size: 14px;

				&.active {
					background-color: #ff6b00;
					color: #fff;
				}
			}
		}

		.date-picker {
			color: #333;
			font-size: 14px;
		}
	}

	.stats-section {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;

		.stats-row {
			display: flex;
			justify-content: space-around;
			margin-bottom: 15px;
		}

		.stats-item {
			text-align: center;

			.value {
				font-size: 24px;
				font-weight: bold;
				color: #333;
				display: block;
			}

			.label {
				font-size: 12px;
				color: #666;
			}
		}

		.platform-coupon {
			background-color: #f5f5f5;
			padding: 10px;
			border-radius: 5px;

			.label {
				color: #666;
				font-size: 14px;
			}

			.value {
				color: #333;
				font-weight: bold;
			}
		}
	}

	.data-type-tabs {
		background-color: #fff;
		padding: 10px 15px;
		margin-bottom: 10px;

		.tabs-wrapper {
			display: inline-flex;
			background: #f5f5f5;
			border-radius: 20px;
			padding: 3px;

			.type-item {
				padding: 5px 20px;
				border-radius: 20px;
				font-size: 14px;
				color: #333;

				&.active {
					background-color: #ff6b00;
					color: #fff;
				}
			}
		}
	}

	.charts-box {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
		height: 300px;
	}

	.search-box {
		padding: 10px 15px;
		background-color: #ffffff;

		input {
			background-color: #f5f5f5;
			padding: 8px 15px;
			border-radius: 20px;
			font-size: 14px;
		}
	}

	.data-list {
		background-color: #fff;
		margin: 0 15px;
		border-radius: 10px;
		overflow: hidden;

		.list-header {
			display: grid;
			grid-template-columns: 2fr 1fr 1fr 1fr;
			padding: 15px;
			background-color: #ffd700;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
		}

		.list-item {
			display: grid;
			grid-template-columns: 2fr 1fr 1fr 1fr;
			padding: 15px;
			border-bottom: 1px solid #eee;
			font-size: 14px;
			text-align: center;

			&:last-child {
				border-bottom: none;
			}
		}
	}
	::v-deep .uni-calendar--fixed{
		z-index:9999 !important;
	}
</style>